<template>
  <div class="container">
    <div class="img">
      <img src="/login.jpg" alt="" />
    </div>

    <div class="login">
      <p style="font-size: 30px; font-weight: bold">宠物领养后台管理系统</p>
      <input
        id="account"
        type="text"
        placeholder="请输入用户名"
        @blur="judge_user"
      />
      <p id="user" style="font-size: 14px; color: #fb542f" class="disabled">
        用户名不能为空
      </p>
      <input
        id="pwd"
        type="password"
        placeholder="请输入密码"
        @blur="judge_password"
      />
      <p id="password" style="font-size: 14px; color: #fb542f" class="disabled">
        密码不能为空
      </p>
      <input type="submit" value="登录" @click="test()" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    test() {
      const url = "/admin/login";
      const params = `account=${
        document.getElementById("account").value
      }&password=${document.getElementById("pwd").value}`;
      this.axios.post(url, params).then((res) => {
        console.log(res);
        // console.log(res.data.code);
        if (res.data.code == 200) {
          sessionStorage.setItem("code",res.data.code)
          this.$router.push("/home")
        } else {
          alert("用户名或密码错误");
        }
      });
    },
    // 设置提示信息的隐藏和显示
    judge_user() {
      if (!document.getElementById("account").value) {
        document.getElementById("user").classList.remove("disabled");
      } else {
        document.getElementById("user").classList.add("disabled");
      }
    },
    judge_password() {
      if (!document.getElementById("pwd").value) {
        document.getElementById("password").classList.remove("disabled");
      } else {
        document.getElementById("password").classList.add("disabled");
      }
    },
  },
};
</script>


<style scoped src="../assets/reset.css">
</style>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .img {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    img {
      width: 100vw;
    }
  }
  .login {
    width: 30vw;
    height: 40vh;
    background-color: transparent;
    border-radius: 10px;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    margin-top: -20vh;
    margin-left: -15vw;

    input {
      width: 45%;
      height: 10%;
      padding: 0 0.5vw;
      font-size: 12px;
      margin-top: 2vh;
      border-radius: 10px;
      border: 1px solid #cdcdcd;
      &:last-child {
        cursor: pointer;
      }
    }
    .disabled {
      visibility: hidden;
    }
  }
}
</style>